import $ from './jquery.js'


export function nav_item() {
    let color = $('.nav-item').eq(0).css('color');
    $('.nav-item').mouseenter(function () {
        let index = $('.nav-item').index(this);
        $('.pannel-con').eq(index).css('display', 'block').siblings().css('display', 'none');
        let color2 = $('.pannel-con').eq(index).find('.highlight').eq(0).css('color');
        $('.nav-item').eq(index).css('color', color2).siblings().css('color', color);
        $('.nav-item').eq(index).find('a').css('color', color2)
        $('.nav-item').eq(index).find('a').css('text-decoration', 'none')


    })
    $('.nav-item').mouseleave(function () {
        let index = $('.nav-item').index(this);
        $('.pannel-con').eq(index).css('display', 'none');
        $('.nav-item').eq(index).find('a').css('color', color)
        $('.nav-item').eq(index).css('color', color)
    })

    $('.pannel-con').mouseenter(function () {
        let index = $('.pannel-con').index(this);
        let color2 = $('.pannel-con').eq(index).find('.highlight').eq(0).css('color');
        $(this).css('display','block')
        $('.nav-item').eq(index).css('background-color', 'white').siblings().css('background-color','')
        $('.nav-item').eq(index).css('color', color2).siblings().css('color',color)
        $('.nav-item').eq(index).find('a').css('color', color2)
    })
    $('.pannel-con').mouseleave(function () { 
        let index = $('.pannel-con').index(this);
        $(this).css('display','none')
        $('.nav-item').eq(index).css('background-color', '')
        $('.nav-item').eq(index).css('color', color)
        $('.nav-item').eq(index).find('a').css('color', color)
     })
};

